<template>
  <div id="contacts-detail">
    <!-- 如果传过来的currentPerson是空对象且isNewFris为false，则显示logo -->
    <div class="logo-wrapper" v-if="!currentPerson.friendUsername && !isNewFris">
      <span class="logo iconfont icon-weixin"></span>
    </div>
    <!-- currentPerson有值时 -->
    <div class="person" v-if="currentPerson.friendUsername">
      <header class="header">
        <span>详细信息</span>
      </header>
      <div class="content">
        <div class="avatar-wrapper">
          <img class="avatar" :src="imgBaseUrl+currentPerson.friendImg" alt="">
        </div>
        <h2 class="alias">
          <span>{{currentPerson.friendAlias}}</span>
          <span class="iconfont icon-xiugai" style="cursor: pointer" @click="resetAlias"></span>
        </h2>
        <div class="nickname">
          <span>昵称：</span>
          <span>{{currentPerson.friendNickname}}</span>
        </div>
        <div class="username">
          <span>账号：</span>
          <span>{{currentPerson.friendUsername}}</span>
        </div>
        <Button type="success" class="sendMsg" @click="sendMsg">发消息</Button>
      </div>
    </div>
    <!-- 当点击‘新的朋友’时 -->
    <div class="newFris" v-if="isNewFris">
      <h1 class="title">新的朋友</h1>
      <ul class="newFris-list">
        <li class="list-item" v-for="(friend, index) in friendRequestList" :key="index">
          <div class="item-left">
            <img :src="imgBaseUrl+friend.senderImg" alt="">
          </div>
          <div class="item-right">
            <h2 class="nickname">{{friend.senderNickname}}</h2>
            <p class="username">账号：{{friend.senderUsername}}</p>
          </div>
          <!--
            status状态
              0：已忽略
              1：已通过
              2：未处理
          -->
          <div class="status-wrapper">
            <div class="accept" v-if="friend.status==='2'" @click="accept(friend.senderId)">接受</div>
            <span class="accepted" v-if="friend.status==='1'">已添加</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {reqHandleFrisRequest} from '@/api/index.js'
export default {
  props: {
    currentPerson: Object,
    isNewFris: Boolean
  },
  computed: {
    ...mapState(['userInfo', 'imgBaseUrl', 'friendRequestList', 'sessionList'])
  },
  methods: {
    resetAlias () {
      alert('功能开发中')
    },
    async accept (senderId) {
      const accepterId = this.userInfo.id
      const type = '1'
      const result = await reqHandleFrisRequest({accepterId, senderId, type})
      if (result.success) {
        this.$store.dispatch('getFriendRequestList') // 重新获取好友申请列表
        this.$store.dispatch('getContacts') // 重新获取通讯录
        const currentSession = {
          accepter: result.newFriend,
          messages: [],
          count: 0
        }
        this.$store.dispatch('getCurrentSession', {currentSession}) // 设置当前会话
        this.$store.dispatch('updateSessionList', currentSession) // 加入sessionList
        this.$router.replace('/main/chats') // 跳转路由
      }
    },
    sendMsg () {
      let _index = false
      this.sessionList.forEach((session, index) => { // 遍历sessionList看是否存在和当前person的会话
        if (session.accepter.friendId === this.currentPerson.friendId) {
          _index = index
        }
      })
      if (_index !== false) { // 存在会话，设置为currentSession, 注意_index为0也表示存在会话
        const currentSession = this.sessionList[_index]
        this.$store.dispatch('getCurrentSession', {currentSession}) // 设置为currentSession
        this.$store.dispatch('updateSessionList', currentSession) // 排到sessionList第一个
      } else { // 不存在，则新建一个会话并push到sessionList，然后在设置为currentSession
        const currentSession = {
          accepter: this.currentPerson,
          messages: [],
          count: 0
        }
        this.$store.dispatch('getCurrentSession', {currentSession}) // 设置为当前会话
        this.$store.dispatch('updateSessionList', currentSession) // 更新sessionList，push一个会话
      }
      this.$router.replace('/main/chats') // 跳转到chats路由
    }
  }
}
</script>

<style lang="stylus">
#contacts-detail
  position absolute
  left 310px
  top 0
  right 0
  bottom 0
  .logo-wrapper
    height 100%
    width 100%
    .logo
      position absolute
      left 50%
      top 50%
      transform translate(-50%,-50%)
      color #dcdbdb
      font-size 100px
  .person
    width 100%
    height 100%
    .header
      height 50px
      margin 0 20px
      text-align center
      line-height 50px
      border-bottom 1px solid #cccccc
    .content
      .avatar-wrapper
        height 180px
        padding-top 80px
        box-sizing border-box
        text-align center
        .avatar
          height 100px
          width 100px
      .alias
        height 70px
        text-align center
        line-height 70px
        font-size 26px
      .nickname
        width 100px
        margin 20px auto 5px auto
        white-space nowrap
      .username
        width 100px
        margin 0 auto
        white-space nowrap
      .sendMsg
        display block
        width 210px
        height 40px
        margin 35px auto 0 auto
        font-size 15px
        box-shadow none
        background-color #1aad19
        border-color #1aad19
  .newFris
    width 100%
    height 100%
    .title
      height 80px
      padding-top 30px
      padding-left 35px
      border-bottom 1px solid #eee
      color #000
    .newFris-list
      position absolute
      top 80px
      bottom 0
      width 100%
      padding 0 120px 0 120px
      overflow auto
      .list-item
        display flex
        height 100px
        padding 20px 0
        border-bottom 1px solid #eeeeee
        align-items center
        .item-left
          flex 0 0 60px
          margin-right 15px
          img
            width 100%
            height 100%
        .item-right
          flex 1
          display flex
          flex-direction column
          justify-content space-between
          .nickname
            font-size 17px
            color #000
          .username
            color #8a8a8a
      .status-wrapper
        width 54px
        height 28px
        .accept
          background-color #13b113
          width 100%
          height 100%
          text-align center
          color #fff
          line-height 28px
          font-size 15px
          cursor pointer
        .accepted
          display block
          width 100%
          height 100%
          line-height 28px
          font-size 15px
          text-align center
          color #9e9e9e
</style>
